<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-dns-prefetch-control" content="on">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title></title>
    <script src="jsQR.js"></script>
</head>

<body>
    <h3>Hello {{uname}}</h3>
    <div>
        <canvas id="canvas"></canvas>
        <input id="cameraInput" type="file" accept="image/*" capture="camera">
        <div id="outputMessage" style="width:200px;font-size:10px"></div>
    </div>
    </div>
    <br />
    <br />
    <a href="/app_login">退出登陆</a>
    <script>
        const cameraInput = document.getElementById("cameraInput");
        const outputMessage = document.getElementById("outputMessage");
        const canvasElement = document.getElementById("canvas");

        const canvas = canvasElement.getContext("2d");
        canvasElement.height = 500;
        canvasElement.width = 400;
        cameraInput.onchange = function () {
            if (this.files.length != 1) return;
            let file = this.files[0];
            let url = URL.createObjectURL(file);
            let cameraShow = new Image();
            cameraShow.onload = function () {
                canvas.drawImage(this, 0, 0, canvasElement.width, canvasElement.height);
                let imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
                URL.revokeObjectURL(this.src);
                const code = jsQR(imageData.data, imageData.width, imageData.height, {
                    inversionAttempts: "dontInvert",
                });
                if (code) {
                    // outputMessage.innerHTML = `扫描结果：<a href="${code.data}">${code.data}</a>`;
                    window.location.href = code.data;
                } else {
                    outputMessage.innerHTML = "无扫描结果";
                }
            };
            cameraShow.src = url;
        }; 
    </script>
</body>

</html>